<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>客户系统-会员等级新增</title>
    <script src="../../../../static/js/vue.js" th:src="@{/js/vue.js}"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="../../../../static/css/element.css" th:href="@{/css/element.css}">
	<link rel="stylesheet" href="../../../../static/css/global.css" th:href="@{/css/global.css}" />
	<link rel="stylesheet" href="../../../../static/css/main.css" th:href="@{/css/main.css}" />
	<link rel="stylesheet" href="../../../../static/css/myelement.css" th:href="@{/css/myelement.css}" />
	<!-- 引入组件库 -->
	<script src="../../../../static/js/element.js" th:src="@{/js/element.js}"></script>
	<script src="../../../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
</head>
<body>
<div id="app">
    <div class="main-content" v-cloak>
    	<!-- 页面头部 -->
		<div class="page-header">
			<h1 class="page-title">新增会员等级</h1>
			<div class="breadcrumb"><a href="javascript:top.location.reload();">首页</a><span>/</span>客户<span>/</span><a href="/backstage/customer/customerlevel/tolist">会员等级列表</a></div>
		</div><!-- 页面头部 end -->
    
    	<el-form ref="customerlevel-form" :model="customerLevel" :rules="rules" label-width="100px">
	    	<div class="main-content-body">
				<div class="edit-form">
					<el-form-item prop="name" label="等级名称">
                        <el-input v-model="customerLevel.name"></el-input>
                    </el-form-item>
                    <el-form-item label="图标">
						<div class="upload-image-box" @click="dialogImageVisible = true" style="width:70px;height:70px;">
							<div v-show="uploadImage.imageUrl" class="upload-image">
								<img :src="uploadImage.imageUrl">
								<span class="upload-operate upload-operate-delect" @click.stop="handleRemove">点击删除</span>
							</div>
							<span v-show="!uploadImage.imageUrl" class="upload-button">
								<i class="el-icon-upload"></i>
								添加图片
							</span>
						</div>
					</el-form-item>
                    <el-form-item prop="integral">
                    	<template slot="label">
							<el-popover ref="popoverqsu2" placement="bottom-start" width="440" trigger="hover">
							  <p class="z-jiao">
							  	1. 消费者积分需要达到当前填写的值，才能成为当前的会员等级；<br/>
						  		2. 如果填写100，则表示100积分以上(包含)才能达到当前等级；<br/>
						  		3. 建议初始等级填写0<br/>
						  		4.例：等级1:0，等级2:100，等级3:200，则表示0-100是等级1,100-200是等级2,200以上是等级3</p>
							</el-popover>
							<i v-popover:popoverqsu2 class="el-icon-question"></i>
						         等级积分
						</template>
                        <el-input v-model="customerLevel.integral"></el-input>
                    </el-form-item>
                    <el-form-item prop="note" label="等级备注">
                        <el-input type="textarea" v-model="customerLevel.note" placeholder="填写相关备注信息" :rows="3"></el-input>
                    </el-form-item>
                    
                    <div class="edit-button-fixed">
	                    <div class="edit-button z-yuan-butn">
							<el-button type="primary" @click="saveCustomerLevel" :loading="loading">保存</el-button>
	            			<el-button @click="returnList">返回</el-button>
						</div>
					</div>
	             </div>
	        </div>
        
	        <!-- 上传图片模态框 -->
			<el-dialog title="上传文件" :visible.sync="dialogImageVisible">
				<el-upload v-model="customerLevel.image"
				  ref="upload"
				  action="/fastdfs/file/uploadFile"
				  :multiple=false 
				  :limit="1"
				  list-type="picture"
				  :file-list="fileList"
				  :on-success="dosuccess"
				  :on-remove="handleRemove"
				  :before-upload="beforeAvatarUpload">
				  <el-button size="medium">+&nbsp;点击选择图片</el-button>
				  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过1M</div>
				</el-upload>
				<div slot="footer" class="dialog-footer">
				    <el-button @click="dialogImageVisible = false">确 定</el-button>
				</div>
			</el-dialog>
	        <!-- 上传图片模态框 end -->
	    </el-form>
   	</div>
</div>
</body>
<script th:inline="javascript">
    new Vue({
        el: "#app",
        data: {
        	customerLevel: {
                name: '',
                image: '',
                integral: '',
                note: ''
            },
            loading:false,
            dialogImageVisible: false,
            fileName:'',
         	// 上传图片数据
	        uploadImage: {
	        	imageUrl: '',
	        	fileList: []
	        },
            rules: {
                name: [
                    {required: true, message: "请输入等级名称", trigger: 'blur'},
                    {max:20, message: '名称长度20个字符以内', trigger: 'blur'}
                ],
                integral: [
                	{required: true, message: "请输入等级所需积分", trigger: 'blur'},
                	{
                        validator: function (rule, value, callback) {
                            var regex = /^(0|[1-9]\d*)$/;
                            if (value!="" && !regex.test(value)) {
                                callback(new Error('请输入非负整数！'))
                            } else {
                                callback();
                            }
                        }, trigger: 'blur'
                    }
                ],
                note: [
                    {max:100, message: '备注长度100个字符以内', trigger: 'blur'}
                ]
            }
        },
        methods: {
        	beforeAvatarUpload(file) {
       	        const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png');
       	        const isLt2M = file.size / 1024 / 1024 < 1;

       	        if (!isJPG) {
       	        	this.$message({
                     message: '图标只能是 JPG、PNG 格式!',
                     type: 'error',
                     customClass: 'message-center',
                   });
       	        }
       	        if (!isLt2M) {
       	        	this.$message({
                        message: '图标大小不能超过 1MB!',
                        type: 'error',
                        customClass: 'message-center',
                      });
       	        }
       	        return isJPG && isLt2M;
     	    },
        	dosuccess:function(response, file, fileList){
        		this.customerLevel.image = response.fdfsIpPre + response.fullPath;
        		this.fileName = file.name;
        		this.uploadImage.imageUrl = response.fdfsIpPre + response.fullPath;
        	},
        	handleRemove:function(file, fileList){
        		var self = this;
   			 	$.post("/fastdfs/file/deleteFile",
			    	{"fullPath":this.customerLevel.image},
				    function(data) {	
			    		var obj = eval('(' + data + ')');
						if(obj.returnCode){
							self.customerLevel.image = "";
							self.uploadImage.imageUrl = "";
							self.fileList=[];
			            }
				    }
				);
        	},
        	saveCustomerLevel: function () {
                let self = this;
                self.$refs['customerlevel-form'].validate((valid) => {
                    if (valid) {
                    	self.loading = true;
                        $.ajax({
                            url: "/backstage/customer/customerlevel/add",
                            type: "POST",
                            data: JSON.stringify(self.customerLevel),
                            contentType: "application/json;charset=UTF-8",
                            dataType: "json",
                            success: function (data) {
                                if (data && data.returnCode == "1") {
                                    self.$message({
                                    	showClose: true,
                                    	duration: 1500,
                                        message: '新增会员等级成功',
                                        type: 'success',
                                        customClass: 'message-center',
                                        onClose: function () {
                                            window.location.href = "/backstage/customer/customerlevel/tolist"
                                        }
                                    });
                                } else {
                                    self.$message({
                                    	showClose: true,
                                    	duration: 1500,
                                        message: '新增会员等级失败',
                                        type: 'error',
                                        customClass: 'message-center'
                                    });
                                    self.loading = false;
                                }
                            },
                            error: function () {
                                self.$message({
                                	showClose: true,
                                	duration: 1500,
                                    message: '系统异常，请联系管理员',
                                    type: 'error',
                                    customClass: 'message-center'
                                });
                                self.loading = false;
                            }
                        });
                    }
                });
            },
            returnList: function () {
            	window.location.href = "/backstage/customer/customerlevel/tolist";
            }
        }
    });
</script>
</html>
